<template>
  <el-card>
    <!-- 调用: 必须添加id属性 :menus="menus"-->
    <Wangeditor  width="100%" height="300" id="editor" v-model="content"/>
    <el-divider></el-divider>
    <!-- 折线图渲染容器 -->
    <div class="lines"></div>
    <el-divider></el-divider>
    <!-- 柱状图渲染容器 -->
    <div class="bar"></div>
    <el-divider></el-divider>
    <!-- 饼状图渲染容器 -->
    <div class="pie"></div>
  </el-card>
</template>

<script>
// 导入vue-wangeditor
import Wangeditor from 'vue-wangeditor';
// 1-导入echarts
import * as echarts from "echarts";
export default {
  data(){
    return {
      content:`
        <h1>hello Wangeditor</h1>
        <img src="https://www.baidu.com/img/540x258_2179d1243e6c5320a8dcbecd834a025d.png">
      `,
      menus:[
        'bold',	// 粗体
        'underline',	// 下划线
        'italic',	// 斜体
        'strikethrough',	// 中线
        'eraser',	// 清空格式
        'forecolor',	// 文字颜色
        'bgcolor',	// 背景颜色
        ]
    }
  },
  // 注册
  components:{Wangeditor},
  mounted() {
    this.lines();
    this.bar();
    this.pie();
  },
  methods: {
    lines() {
      // 初始化echarts
      const myEcharts = echarts.init(document.querySelector(".lines"));
      // 折线图配置对象
      const option = {
        title: {
          text: "本周销售业绩",
        },
        // 缩放工具
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        // 鼠标悬浮提示框
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            areaStyle: {},
          },
        ],
      };
      // 设置配置对象
      myEcharts.setOption(option);
    },
    bar() {
      // 初始化echarts
      const myEcharts = echarts.init(document.querySelector(".bar"));
      // 柱状图配置对象
      const option = {
        title: {
          text: "深圳月最低生活费组成（单位:元）",
          subtext: "From ExcelHome",
          sublink: "http://e.weibo.com/1341556070/AjQH99che",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            var tar = params[1];
            return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          splitLine: { show: false },
          data: ["总费用", "房租", "水电费", "交通费", "伙食费", "日用品数"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "辅助",
            type: "bar",
            stack: "总量",
            itemStyle: {
              barBorderColor: "rgba(0,0,0,0)",
              color: "rgba(0,0,0,0)",
            },
            emphasis: {
              itemStyle: {
                barBorderColor: "rgba(0,0,0,0)",
                color: "rgba(0,0,0,0)",
              },
            },
            data: [0, 1700, 1400, 1200, 300, 0],
          },
          {
            name: "生活费",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "inside",
            },
            data: [2900, 1200, 300, 200, 900, 300],
          },
        ],
      };
      // 设置配置对象
      myEcharts.setOption(option);
    },
    pie() {
      // 初始化
      const myEcharts = echarts.init(document.querySelector(".pie"));
      const option = {
        title: {
          text: "某站点用户访问来源",
          subtext: "纯属虚构",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "搜索引擎" },
              { value: 735, name: "直接访问" },
              { value: 580, name: "邮件营销" },
              { value: 484, name: "联盟广告" },
              { value: 300, name: "视频广告" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 设置配置对象
      myEcharts.setOption(option);
    },
  },
};
</script>

<style scoped>
.lines,
.pie,
.bar {
  height: 400px;
}
</style>